<script setup lang="ts">
import time from '@/utils/time'
const props = defineProps({
  col: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['command'])

const handleAction = (command: any, scope: any) => {
  emit('command', command, {
    row: scope.row,
    index: scope.$index
  })
}

const setShow = (row: any, link: any) => {
  if (link.show) {
    return link.show(row)
  }

  return true
}

const setDisabled = (row: any, link: any) => {
  if (link.disabled) {
    return link.disabled(row)
  }

  return false
}
</script>
<template>
  <template v-if="props.col.children && props.col.children.length > 0">
    <el-table-column
      :label="props.col.label"
      :width="props.col.width"
      :align="props.col.align"
    >
      <table-column
        v-for="(item, index) in props.col.children"
        :col="item"
        :key="index"
      />
    </el-table-column>
  </template>
  <el-table-column
    v-else
    :show-overflow-tooltip="true"
    :sortable="props.col.sortable"
    :prop="props.col.prop"
    :align="props.col.align"
    :label="props.col.label"
    :width="props.col.width"
  >
    <template #default="{ row, $index }">
      <template v-if="props.col.type === 'date'">
        {{ time.formatTimeStamp(row[props.col.prop], props.col.dateFormat) }}
      </template>
      <template v-else-if="props.col.buttons?.length">
        <el-button
          v-for="(btn, index) in col.buttons"
          :key="index"
          :type="btn.type"
          :disabled="setDisabled(row, btn)"
          v-show="setShow(row, btn)"
          @click="handleAction(btn.command, { row, $index })"
        >
          {{ btn.name }}
        </el-button>
      </template>
      <component
        v-else-if="props.col.render"
        :is="props.col.render"
        :row="row"
        :index="$index"
      />
      <slot
        v-else-if="props.col.slot"
        :slotName="props.col.prop"
        :row="row"
        :index="$index"
      ></slot>
      <span v-else>{{ row[props.col.prop] }}</span>
    </template>
    <template #header="{ column, $index }">
      <component
        v-if="props.col.headerRender"
        :is="props.col.headerRender"
        :column="column"
        :index="$index"
      />
      <slot
        v-else-if="props.col.headerSlot"
        name="customHeader"
        :slotName="props.col.headerSlot"
        :column="column"
        :index="$index"
      ></slot>
      <span v-else>{{ column.label }}</span>
    </template>
  </el-table-column>
</template>

<style lang="scss" scoped></style>
